<script>
export default {
  name: "Ex3",
  data(){
    return {
        stus:[]
    }
  },
  methods:{

  },
  /**/
  beforeMount() {
    //dom节点没有渲染，适合做动画之类的操作
   // console.log('beforeMount:',this.$el)

  },
  /*生命周期钩子函数*/
  mounted() {
    //dom节点已经存在，适合拿数据
    console.log('mounted:',this.$el)
    this.stus=[{id:1001,name:'jack',age:21},
      {id:1002,name:'rose',age:20},
      {id:1003,name:'tom',age:19},
      {id:1004,name:'gJson',age:22}]
    console.log('mounted:',this.stus)
  }
}
</script>

<template>
  <table width="100%" border="1">
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr v-for="stu in stus" :key="stu.id">
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
    </tr>
  </table>
  <hr>
  <table width="100%" border="1">
    <tr>
      <td>索引</td>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr v-for="(stu,index) in stus" :key="index">
      <td>{{index}}</td>
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
    </tr>
  </table>
</template>

<style scoped>

</style>